<template>
  <div style="width:100%;height:100vh"  >
    <homeHead class="line"  :showLeft="true" :name="'在线提问'"></homeHead>   
    <div class="content">
        <div class="timeline">
            <div class="time" v-if="currentTime">
                {{currentTime}}
            </div>
        </div>
        <div class="chat">
          <div  v-for="(item,index) in messageAry" :key="index">
              <div  class="item right">
                  <span class="message">{{item.message}}</span>
                  <img  src="@/assets/img/people.png"  />
              </div>
              <div   class="item left">
                  <img  src="@/assets/img/chatpeople.png"  /> 
                  <ul class="message">
                    <template v-if="item.chat.length && !item.show">
                      <li  @click="gotoDetail(item)" v-for="(item) in item.chat" :key="item.id" >{{item.Title}}</li> 
                      <li class="more"  @click="next(item,index,item.chat.length)" v-if="!item.pageLast" style="">更多</li>
                    </template> 
                     <template v-else> 
                          <li  v-for="(item) in item.chat"  :key="item.id" >{{item.Title}}</li> 
                    </template>
                  </ul>  
                  
              </div>
          </div> 
        </div> 
    </div> 
     <div class="contentInput" > 
        <span class="iconfont" @click="record">&#xe643;</span>
        <input :adjust-position="true" class="uni-input" type="text"   v-model="sendMessage">
        <button @click="send">发送</button>
     </div>

  </div>
</template>
<script>
import homeHead from "./head.vue";
import { onlineChat }  from "../../api/message.js"
import { Toast } from 'mint-ui'; 
export default {
  name: "askOnline",
  data(){
    return {
      sendMessage:"", 
      messageAry:[], 
      currentTime:"", 
      pageLast:false,  
      pageNow:1,
    }
  },
  mounted() {     
    if(JSON.parse(window.localStorage.askOnline).length) {
        this.messageAry = JSON.parse(window.localStorage.askOnline)
    } 
  },
  methods: {
    // 发送信息 
      send() {     
        if(!this.sendMessage.trim().length) {
          return Toast({
                message: "内容不能为空",
                position: 'center',
                duration: 1000
            });
        }
        onlineChat({pagesize:5,pagenow:1,wherestr:
          this.sendMessage
        }).then(res=>{     
          let ary = JSON.parse(res.data.data);     
          let hour = new Date().getHours();
          let minute = new Date().getMinutes(); 
          let pageLast = false;  
          hour = String(hour).length === 1 ? "0"+hour : hour;
          minute = String(minute).length === 1 ? "0"+minute : minute;
          this.currentTime = hour + ":" + minute;  
          var dataAry = []; 
          if(ary) { 
            if(ary.length < 5) {
              pageLast = true;
            }else if(res.data.DataCount === 5) { 
              pageLast = true;
            } else {
              pageLast = false;
            }
            ary.forEach(i=>{
              dataAry.push({ 
                id:i.Id, 
                ...i,  
              })  
            }) 
          }else {  
              pageLast = true
              dataAry.push({ 
                id:123, 
                Title:"暂无更多数据",   
                none:true,
              })  
          }   
          this.messageAry.push({page:1,pageLast,message:this.sendMessage,chat:dataAry,show:false}); 
          this.$store.state.askOnline.list = this.messageAry;    
          window.localStorage.askOnline = JSON.stringify(this.messageAry);
          this.sendMessage = "";
        })
      },  
      // 更多
      next(item,index,nowPage) {    
        onlineChat({pagesize:5,pagenow:++item.page,wherestr:
          item.message
        }).then(res=>{     
          if(res.data.DataCount === 0) {
            return item.pageLast = true;
          }
          let ary = JSON.parse(res.data.data);
             
          if(ary.length < 5) { 
            if(nowPage+5 === res.data.DataCount) {
              item.pageLast = false;
            }else {
              item.pageLast = true;
            } 
          }
          let dataAry = []; 
          this.messageAry.forEach((i,no)=>{
            if(index === no && ary) {
              ary.forEach(i=>{
                dataAry.push({ 
                  id:i.Id, 
                  ...i, 
                  sendMessage:this.sendMessage,
                })  
              })  
              i.chat.push(...dataAry);
            }
          })
        })
      },
      gotoDetail(item) {      
        if(item.none) return
        this.$router.push({path:"/askDetail?queryId="+item.id,query:{data: JSON.stringify(item)}});
      },
      record() {
				let _this = this;
        plus.speech.startRecognize({
          engine:'baidu',
          punctuation:false,
          timeout:10*1000,
        }, function(s) {
					// 打印输出结果
					 _this.sendMessage = s
					// 关闭语音
					plus.speech.stopRecognize();
				});
      },
  },
  components: {
     homeHead: homeHead,
  },
};
</script>
<style lang="scss" scoped>  
.line {
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.content {
  width:100%;  
  background:#f2f3f8; 
  // min-height:calc(100vh - 120px);  
  height:calc(100% - 101px); 
  overflow-y:auto;
  padding-top:10px;
  padding-bottom:70px;  

  .timeline {
    width:100%;
    height:20px;
    margin-top:20px;
    text-align: center;
    .time {
      width:50px;
      height:25px;  
      line-height: 25px;
      margin:0 auto;
      background:#cecece;
      color:#fff; 
      border-radius: 5px;
    }
  } 

  .chat {
    width:100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top:20px;    
    .item { 
      margin-top:20px;
      img {
        vertical-align: middle; 
        border:1px solid #eee;
        width:45px;
        height:45px;
        border-radius:10px;
      }
      width:100%;
      vertical-align: middle;
    } 
    .message {
      display: inline-block;
      width:75vw;
      min-height:50px; 
      border-radius: 10px; 
      padding:10px;
      box-sizing: border-box; 
      background:#fff; 
      vertical-align: middle; 
      .more {
        width:40px;
        text-align:center;
        border:1px solid #ddd;
        padding:4px 5px;
        margin-top:5px ;
        border-radius:5px;
      }
    }
    .left {
      text-align: left; 
      ul { 
        margin-top:10px; 
        li { 
          padding-top:10px;
          padding-bottom:10px; 
          border-bottom:1px dashed #ddd; 
        } 
      
      }

      .message {
        text-align: left;
        position: relative;  
        margin-left:10px;
      }
      .message::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 12px solid #fff;
        border-bottom: 6px solid transparent;
        left:-10px;
        top:50%;
        transform: translateY(-50%);
        position: absolute;
        border-bottom: 6px solid transparent;
      }
    }
    .right {
      text-align: right; 
      .message {
        text-align: left;
        background:#0f88eb;
        color:#fff;  
        position: relative; 
        margin-right:10px;
      }
      .message::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-left: 12px solid #0f88eb;
        right:-10px;
        top:50%;
        transform: translateY(-50%);
        position: absolute;
        border-bottom: 6px solid transparent;
      }
    } 
  } 

}   
 
//  输入框样式
  .contentInput { 
    width:100%;
    height:40px;
    line-height: 40px;
    border-top:1px solid #ddd;
    position: absolute; 
    bottom:0;
    background:#fff;  
    button {
      background:#0f88eb;
      outline-style:  none; 
      border: 0 none; 
      color:#fff; 
      height:30px;
      line-height:30px; 
      padding:0 20px;  
      float: right;
      margin-top:5px;
    } 
    input { 
      text-indent: 1em;
      width:calc(100vw - 120px);
      margin-left:40px; 
      height: 25px;
      line-height: 25px;   
      border-radius: 5px;  
      border:1px solid #ccc;
    }  
    .iconfont {
      position: absolute;
      left:10px;
      font-size: 20px;
      color:grey; 
      cursor: pointer;
    }
  }

</style>